<template>
  <div class="page-main" v-title data-title="附件模板上传">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container" ref="imageWrapper">
      <div class="head-content">
        <span class="bold-font">附件模板上传</span>
        <div class="btn-line">
          <a-form :form="form"  :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-form-item label="模板类型">
          
            <a-select
            v-decorator="['templateType', { rules: [{ required: true, message: '请选择模板类型!' }] }]"
              show-search
              placeholder="请选择模板类型"
              option-filter-prop="children"
              style="width: 200px"
              :filter-option="filterOption"
              @change="handleChange"
            >
              <a-select-option v-for="(item,i) in attachTypes" :value="item.code" :key="item.code">
                {{item.name}}
              </a-select-option>
             
            </a-select>
          </a-form-item>
          </a-form>
        </div>
   </div>
    
     <hte-upload v-if=" reload" :accept="accept" :options="options"  dbKey="Trd" ftpKey="ftp"
           :uploadDisabled="uploadDisabled"
           :deleteDisabled="deleteDisabled"  
          :queryParams="queryParams" :showPage="false" v-model="fileList" :onSuccess="onSuccess" :onChange="onChange"   class="uploader-example" ref="uploader" @file-error="fileError" @file-complete="fileComplete" @complete="complete"></hte-upload>
     </div>
  </div>
</template>

<script>

import '@/config/hteupload.install.js';
import {defautlCategoryMap} from './common/utils';
import {codeInfoList} from '@/api/codeInfo'
import {filterHasPermission} from '@/utils/hasPermission'

export default {
  name: 'ht-minio-uploader',
  components: {
      HomeNav: () => import('@/components/layouts/HomeNav'),   
  },
  data () {
    
      return {
        reload:false,
        uploadDisabled:!filterHasPermission('attachTemplate:edit'),
        deleteDisabled:!filterHasPermission('attachTemplate:edit'),
        options: {
          
        },
        userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ht-minio-uploader',
      },
       form: this.$form.createForm(this, { name: 'form' }),
        queryParams:{
          dbKey:"Trd",
          busField:"attachTemplate",
          ftpKey:"ftp",
        },
        
        accept:"*",
        fileList:[],
        attachTypes:[]
      }
    },
    watch:{
      fileList:function(newValue){
      }
    },
    mounted(){
      this.initDict()

    },
    methods: {
      initDict(){
       codeInfoList({type:'附件模板上传类型',pageSize:-1,isdel: 0,column:"code",order:"Asc"}).then((res) => {
          if (res.code == 200) {
            this['attachTypes'] = res.result.records
            this.form.setFieldsValue({templateType:res.result.records[0].code})
             this.queryParams.busKey = res.result.records[0].code
             this.reload = true
          } else {
            this.$message.warning('操作异常:' + res.message)
          }
        })
    },
    handleChange(value) {
      //附件模板类型
      console.log(`模板类型: ${value}`);
      this.queryParams.busKey = value
      this.reload = false
      this.$nextTick(res => {
       this.reload = true
      })
    },
  
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
     setFileList(){
       this.fileList = []
       
     },

     onSuccess(res,file,fileList){

     },
     onChange(file,fileList){

     },
      fileError(res,file,fileList){
        
      },
      complete(){},
      fileComplete(rootFile, file, response,chunk){

      },
    },
    
 }
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.cr-content-pop {
  p {margin-bottom: 15px;color: #666;
    &:hover{color: @bg-color-btn;}
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.em{font-size: 12px;color: #f5222d;margin-left: 5px;}
/deep/ .ant-input-number{width: 100%;}
.mt15{margin-top:25px}
.ratebox{top: -3px;display: inline-block;}
.btn-line{display: flex;}
/deep/ .ant-form .ant-form-item:not(.self-form-item) .ant-form-item-label{width: 149px;}
/deep/ .ant-form .ant-form-item:not(.self-form-item) .ant-form-item-control-wrapper{width: calc(100% - 149px);}
</style>
